<%--
  Created by IntelliJ IDEA.
  User: liuxuebing
  Date: 2018/10/8
  Time: 23:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
    <%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
    <%@ include file="/WEB-INF/jsp/meta.jsp"%>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="copyright" content="All Rights Reserved, Copyright (C) 2013, Wuyeguo, Ltd."/>
    <title>电子结算中心</title>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/jquery-easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/css/layout.css"/>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/css/wu.css"/>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/css/icon.css"/>
    <script type="text/javascript" src="${ctx}/static/js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="${ctx}/static/jquery-easyui/jquery.easyui.1.4.5.js"></script>
    <script type="text/javascript" src="${ctx}/static/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${ctx}/static/My97DatePicker/WdatePicker.js"></script>
    <!-- validate -->
    <script type="text/javascript"
            src="${ctx}/static/jquery-validator/jquery.validate.js"></script>
    <script type="text/javascript"
            src="${ctx}/static/jquery-validator/additional-methods.js"></script>
    <script type="text/javascript"
            src="${ctx}/static/jquery-validator/localization/messages_zh.js"></script>
    <script type="text/javascript">
        //采用jquery easyui loading css效果
        function ajaxLoading(){
            $("<div class=\"datagrid-mask\"></div>").css({display: "block", width: "100%", height: $(window).height(),"z-index":"9998" }).appendTo("body");
            $("<div class=\"datagrid-mask-msg\"></div>").html("请稍候。。。").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2,"z-index":"9999" });
        }
        function ajaxLoadEnd(){
            $(".datagrid-mask").remove();
            $(".datagrid-mask-msg").remove();
        }

    </script>
<style type="text/css">
    .error{
        color: red;
        margin-left: 5px;
    }
</style>
</head>
<body class="easyui-layout">
<!-- begin of header -->
<div class="wu-header" data-options="region:'north',border:false,split:true">
    <div class="wu-header-left">
        <h1 style="color: red">工资发放系统</h1>
    </div>
    <div class="wu-header-right">
        <p><strong class="easyui-tooltip" title="2条未读消息">admin</strong>，欢迎您！</p>
        <p><a href="${ctx}/logout">安全退出</a></p>
    </div>
</div>
<!-- end of header -->
<!-- begin of sidebar -->
<div class="wu-sidebar" data-options="region:'west',split:true,border:true,title:'导航菜单'">
    <div class="easyui-accordion" data-options="border:false,fit:true">
        <div title="内容管理" data-options="iconCls:'icon-application-form-edit'" style="padding:5px;">
            <ul class="easyui-tree wu-side-tree">
                <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation"
                                                         data-link="${ctx}/person/view" iframe="0">人员管理</a></li>
                <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group"
                                                 data-link="${ctx}/dept/view" iframe="0">部门管理</a></li>
                <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users"
                                            data-link="${ctx}/wage/view" iframe="0">工资管理</a></li>
                <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group"
                                                 data-link="${ctx}/wage/sumView" iframe="0">汇总查询</a></li>
            </ul>
        </div>
    </div>
</div>
<!-- end of sidebar -->
<!-- begin of main -->
<div class="wu-main" data-options="region:'center'">
    <div id="wu-tabs" class="easyui-tabs" data-options="border:false,fit:true">
        <div title="首页" data-options="closable:false,iconCls:'icon-tip',cls:'pd3'"></div>
    </div>
</div>
<!-- end of main -->
<!-- begin of footer -->
<div class="wu-footer" data-options="region:'south',border:true,split:true">
    &copy; 2013 Wu All Rights Reserved
</div>
<!-- end of footer -->
<script type="text/javascript">
    $(function () {
        $('.wu-side-tree a').bind("click", function () {
            var title = $(this).text();
            var url = $(this).attr('data-link');
            var iconCls = $(this).attr('data-icon');
            var iframe = false;
            addTab(title, url, iconCls, iframe);
        });
    })

    /**
     * Name 载入树形菜单
     */
    $('#wu-side-tree').tree({
        url: 'temp/menu.php',
        cache: false,
        onClick: function (node) {
            var url = node.attributes['url'];
            if (url == null || url == "") {
                return false;
            }
            else {
                addTab(node.text, url, '', node.attributes['iframe']);
            }
        }
    });

    /**
     * Name 选项卡初始化
     */
    $('#wu-tabs').tabs({
        tools: [{
            iconCls: 'icon-reload',
            border: false,
            handler: function () {
                $('#wu-datagrid').datagrid('reload');
            }
        }]
    });

    /**
     * Name 添加菜单选项
     * Param title 名称
     * Param href 链接
     * Param iconCls 图标样式
     * Param iframe 链接跳转方式（true为iframe，false为href）
     */
    function addTab(title, href, iconCls, iframe) {
        var tabPanel = $('#wu-tabs');
        if (!tabPanel.tabs('exists', title)) {
            var content = '<iframe scrolling="auto" frameborder="0"  src="' + href + '" style="width:100%;height:100%;"></iframe>';
            if (iframe) {
                tabPanel.tabs('add', {
                    title: title,
                    content: content,
                    iconCls: iconCls,
                    fit: true,
                    cls: 'pd3',
                    closable: true
                });
            }
            else {
                tabPanel.tabs('add', {
                    title: title,
                    href: href,
                    iconCls: iconCls,
                    fit: true,
                    cls: 'pd3',
                    closable: true
                });
            }
        }
        else {
            tabPanel.tabs('select', title);
        }
    }

    /**
     * Name 移除菜单选项
     */
    function removeTab() {
        var tabPanel = $('#wu-tabs');
        var tab = tabPanel.tabs('getSelected');
        if (tab) {
            var index = tabPanel.tabs('getTabIndex', tab);
            tabPanel.tabs('close', index);
        }
    }
    openWindows = function(option) {
        var defaults = {
            width : 600,
            height : 400,
            modal : true,
            minimizable : false,
            maximizable : false,
            collapsible : false,
            resizable : false,
            iconCls : "icon_auto_colorful__editmenu"
        };
        var _$winObj = $("#" + option.id);
        if (_$winObj.length == 0) {
            _$winObj = $("<div id='" + option.id + "'></div>");
        }
        var _$winOpts = $.extend({}, defaults, option || {});
        //弹窗关闭时同时销毁该窗体
        _$winOpts.onClose = function() {
            if(option.onClose){
                option.onClose();
            }
            $("#" + option.id).window('destroy');
        }
        /*var win = _$winObj.window(_$winOpts);
        win.window("open");*/
        var win = _$winObj.window(_$winOpts).window("open");
        win.window("clear");
        if (option.url)
            win.window("refresh", option.url);
        return win;
    };
</script>
</body>
</html>
